import React, { useState } from 'react';
import { Link, useParams, useLocation } from '@umijs/max';
import { Button } from 'antd';
import { PageContainer } from '@ant-design/pro-components';
import EditCamera from './components/edit';

const CameraDetails: React.FC = () => {
  const location = useLocation();
  const params = useParams();
  const camera_id = params['camera_id'] ? Number(params['camera_id']) : 0;

  const [tab, setTab] = useState('base');

  return (
    <PageContainer
      header={{ title: '编辑摄像头账户' }}
      extra={[
        <Button key="back" type="primary">
          <Link to={{ pathname: `/camera/list` }} state={location.state || {}}>
            返回
          </Link>
        </Button>,
      ]}
      tabList={[{ tab: '基本信息', key: 'base' }]}
      onTabChange={setTab}
    >
      {tab === 'base' && <EditCamera title={'基本设置'} camera_id={camera_id} />}
    </PageContainer>
  );
};
export default CameraDetails;
